<template>
  <div class="assessment">
    <!-- 左侧导航 -->
    <div id="aside" class="aside">
      <ul class="aside-list">
        <div
          v-for="(item, key) in bar"
          :key="key"
          @click="changeBar(key, item.routers)"
        >
          <ul :to="item.routers" style="padding-left:0;text-decoration:none">
            <li :class="{ 'aside-list-active': barActive == key }">
              <i
                :class="[
                  { 'icon-info1': key == 0 },
                  { 'icon-info2': key == 1 },
                  { 'icon-info3': key == 2 },
                  { 'icon-info4': key == 3 },
                  { 'icon-info5': key == 4 },
                  { active: barActive == key },
                ]"
              ></i>
              <p>{{ item.name }}</p>
            </li>
          </ul>
        </div>
      </ul>
    </div>
    <!-- 公共头部 -->
    <!-- <vHeader /> -->
    <!--  -->
    <div class="vcontent">
      <keep-alive>
        <div
          id="basic"
          class="basic-info clearfix"
          :class="{ 'basic-info-hide': !toggleBasic }"
        >
          <div id="gauge"></div>
          <div class="logo">
            <img
              v-if="companyLogo === 'none'"
              src="../img/company-logo.jpg"
              style="border-radius:50%"
            />
            <img v-if="companyLogo.indexOf('base64') > -1" :src="companyLogo" />
          </div>
          <h3>{{ companyName }}</h3>
          <p>
            <template v-if="compositeScore !== ''">
              <el-tooltip class="item" effect="dark" placement="right">
                <div slot="content">
                  衡量指标：根据科技创新指数、企业<br />稳定指数、市场情绪指数、投资风<br />险指数计算得出，仅供参考
                </div>
                <span>
                  <span
                    style="font-size:16px;font-weight:bold;color:#fff;vertical-align:text-bottom"
                    >{{ $t("assessment.CompositeIndex") }}：</span
                  >
                  <span
                    :class="{ 'red-color': compositeScore < 60 }"
                    style="letter-spacing:-1px;font-size:28px;color:#22dabe;"
                    >{{ compositeScore }}</span
                  >
                </span>
              </el-tooltip>
            </template>
            <template v-else>
              <span
                style="font-size:16px;font-weight:bold;color:#cac9ed;vertical-align:text-bottom"
                >{{ $t("assessment.CompositeIndex") }}：</span
              >
              <span class="el-icon-loading"></span>
            </template>

            <!--股权分析  -->
            <!--股权-->
            <span
              @click="addBrand()"
              class="iconwenhao"
              style=""
              title="股权"
            ></span>

            <span
              class="collect"
              style="margin: 0 10px;"
              :class="{ 'not-collect': !collectInfo.isCollection }"
              :title="collectInfo.isCollection ? '取消收藏' : '收藏'"
              @click="handleCollect"
            ></span>

            <span
              class="subInfo"
              :class="{ 'not-subInfo': !subInfo.isSubInfo }"
              :title="subInfo.isSubInfo ? '取消订阅' : '订阅'"
              @click="handleSub"
            ></span>

            <!-- <div class="sub_btn">
              <el-button
                v-if="!showSubBtn"
                size="small"
                type="primary"
                @click="handleSub"
                >订阅</el-button
              >
              <el-button v-else size="small" @click="cancleSub"
                >取消订阅</el-button
              >
            </div> -->
          </p>
          <ul class="list1 clearfix">
            <!-- 科技创新指数 -->
            <li>
              <el-tooltip class="item" effect="dark" placement="right-end">
                <div slot="content">
                  衡量指标：通过多源科技数据自动关<br />联发现和智能算法模型对该公司所拥<br />有技术情况的20多项评估纬度计算出<br />的模型数值。
                </div>
                <i @click="toPath(0)"
                  >{{ $t("assessment.innovationIndex") }}：</i
                >
              </el-tooltip>
              <p class="score-star clearfix" :title="scienceScores + '分'">
                <span
                  v-for="index in 5"
                  :key="index"
                  :class="{
                    color1: index <= Math.ceil(scienceScores / 10 / 2),
                  }"
                ></span>
              </p>
              <!-- <span style="margin-left:6px;vertical-align:middle;font-size:12px">{{scienceScores}}</span> -->
            </li>
            <!-- 企业稳定指数 -->
            <li v-if="country === '1'">
              <el-tooltip class="item" effect="dark" placement="right-end">
                <div slot="content">
                  衡量指标：企业自身及其股东的企业<br />性质、注册资本、同行业注册资本对<br />比、融资情况、股权出质、股权冻结<br />、司法拍卖等
                </div>
                <i @click="toPath(1)"
                  >{{ $t("assessment.stabilityIndex") }}：</i
                >
              </el-tooltip>
              <p class="score-star clearfix" :title="stabilityScore + '分'">
                <span
                  v-for="index in 5"
                  :key="index"
                  :class="{
                    color1: index <= Math.ceil(stabilityScore / 10 / 2),
                  }"
                ></span>
              </p>
              <!-- <span style="margin-left:6px;vertical-align:middle;font-size:12px">{{stabilityScore}}</span> -->
            </li>
            <!-- 市场情绪指数 -->
            <li v-if="country === '1'">
              <el-tooltip class="item" effect="dark" placement="right-end">
                <div slot="content">
                  衡量指标：近一年企业相关新闻信息<br />数量、正负面新闻信息占比等
                </div>
                <i @click="toPath(3)">{{ $t("assessment.impactIndex") }}：</i>
              </el-tooltip>
              <p class="score-star clearfix" :title="opinionScore + '分'">
                <span
                  v-for="index in 5"
                  :key="index"
                  :class="{ color1: index <= Math.ceil(opinionScore / 10 / 2) }"
                ></span>
              </p>
              <!-- <span style="margin-left:6px;vertical-align:middle;font-size:12px">{{opinionScore}}</span> -->
            </li>
            <!-- 投资风险指数 -->
            <li v-if="country === '1'">
              <el-tooltip class="item" effect="dark" placement="right-end">
                <div slot="content">
                  衡量指标：企业自身、股东、对外投<br />资公司、子公司、兄弟公司的企业性质<br />、注册资本、企业失信信息、核心人员<br />失信信息、欠缴税信息、违法违规信息、<br />股权出质、股权冻结、司法拍卖等。
                </div>
                <i @click="toPath(2)">投资安全指数：</i>
              </el-tooltip>
              <p class="score-star clearfix" :title="100 - riskScore + '分'">
                <span
                  v-for="index in 5"
                  :key="index"
                  :class="{
                    color1: index <= Math.ceil((100 - riskScore) / 10 / 2),
                  }"
                ></span>
              </p>
              <!-- <i
                class="conclusion2"
                :class="[
                  { middle: conclusion === '中' },
                  { high: conclusion === '高' },
                ]"
                >{{ conclusion }}</i
              > -->
            </li>
          </ul>
          <!-- 企业标签 -->
          <ul class="list2 clearfix">
            <li v-for="(item, index) in portraitList" :key="index">
              {{ item }}
            </li>
          </ul>
          <!-- 企业资质 -->
          <h5 class="list3-tit">{{ $t("assessment.Credentials") }}</h5>
          <ul
            class="list3 clearfix"
            v-if="certificatesList !== '' && certificatesList !== '暂无数据'"
            v-html="certificatesList"
          ></ul>
          <ul
            class="list3 clearfix"
            v-else-if="certificatesList === '暂无数据'"
          >
            <span style="color:#fff">暂无数据</span>
          </ul>
          <ul class="list3 clearfix" v-else>
            <span class="el-icon-loading" style="color:#fff"></span>
          </ul>

          <!-- 上市公司对标 -->
          <!-- <ul class="list4">
            <h5>{{ $t("assessment.BenchmarkOfListedCompanies") }}</h5>
            <template
              v-if="similarityList.length > 0 && similarityList !== '暂无数据'"
            >
              <li v-for="(item, index) in similarityList" :key="index">
                <p>{{ item.name }}</p>
                <v-btn class="vbtn" @click="goTechComparison(item.name)">{{
                  $t("assessment.Comparison")
                }}</v-btn>
              </li>
            </template>
            <template v-else
              ><span style="color:#fff">{{ similarityList }}</span></template
            >
          </ul> -->
        </div>
      </keep-alive>
      <!-- 弹出框股权分析 -->
      <v-dialog v-model="dialogCompanyList" width="70%" max-width="1400px">
        <v-card>
          <v-card-title>
            <h3
              style="width:100%;line-height:40px;margin:0 34px;border-bottom:1px solid #4fc9ae;color:#03b38c;"
            >
              {{ companyName }}科技评价范围
            </h3>
            <button
              class="el-icon-close close"
              @click="dialogCompanyList = false"
            ></button>
          </v-card-title>
          <v-container
            grid-list-md
            style="padding:0 50px !important;margin:0 !important;"
          >
            <ownershipStructure
              ref="ownershipStructure"
              @dialogCompanyListFalse="dialogCompanyListFalse"
            />
          </v-container>
        </v-card>
      </v-dialog>
      <!-- toggle按钮 -->
      <div
        id="toggle-btn"
        class="toggle-btn"
        :class="{ 'toggle-btn-hide': !toggleBasic }"
        @click="toggleBaseInfo"
        v-ripple
      >
        <i v-show="toggleBasic" class="el-icon-arrow-left toggle-btn-icon"></i>
        <i
          v-show="!toggleBasic"
          class="el-icon-arrow-right toggle-btn-icon toggle-btn-icon-hide"
        ></i>
      </div>

      <div class="main" :class="{ 'main-padding-left': toggleBasic }">
        <ScienceIndex v-if="barActive == 0" />
        <router-view v-else></router-view>
      </div>
    </div>
  </div>
</template>

<script>
// import vHeader from "../components/common/vHeader";
import axios from "axios";
import ownershipStructure from "../components/ownershipStructure";
import permissionsTable from "@/utils/permissions";
import ScienceIndex from "../Index";
var jwt = require("jsonwebtoken");
export default {
  inject: ["reload"],
  components: {
    // vHeader,
    ownershipStructure,
    ScienceIndex,
  },
  data() {
    return {
      dialogCompanyList: false,
      compositeScore: "", // 综合指数
      scienceScores: "", // 科技创新指数
      stabilityScore: "", // 企业稳定指数
      riskScore: "", // 投资风险指数
      opinionScore: "", // 市场情绪指数
      conclusion: "", // 投资风险指数结论 低、中、高
      scoreArr: [false, false, false, false], // 4个分数计算完后，才计算综合指数
      bar: [
        {
          id: 1,
          name: this.$t("assessment.ScienceInfo"),
          routers: "technologyOverview",
        },
        { id: 2, name: this.$t("assessment.BasicInfo"), routers: "basic" },
        {
          id: 3,
          name: this.$t("assessment.RiskControlInfo"),
          routers: "riskmanage",
        },
        { id: 4, name: this.$t("assessment.NewsInfo"), routers: "news" },
        { id: 5, name: "企查查", routers: "qcc" },
      ],
      barActive: 0,
      companyName: this.$cookie.get("companyName") || "",
      colors: [
        { color: "#f56c6c", percentage: 20 },
        { color: "#e6a23c", percentage: 40 },
        { color: "#5cb87a", percentage: 60 },
        { color: "#1989fa", percentage: 80 },
        { color: "#6f7ad3", percentage: 100 },
      ],
      similarityList: "",
      toggleBasic: true,
      watchCompanyName: "",
      portraitList: [], // 公司标签list
      companyLogo: "src", // 图片logo
      companyId: "",
      // isKeep: "", //是否收藏该公司
      certificatesList: "", // 企业资质
      isRole: true,
      userInfo: {},
      showSubBtn: false,
      subInfo: {
        id: "",
        isSubInfo: false,
      }, // 订阅
      collectInfo: {}, // 收藏
    };
  },
  created() {
    this.userInfo = JSON.parse(localStorage.getItem("homeUserInfo"));
  },
  methods: {
    isSub() {
      this.$get(this.$Url.personal.enterpriseIsSub, {
        userId: this.userInfo.id,
        enterpriseId: this.companyId,
      }).then((res) => {
        // console.log("----", res.data);
        if (res.data) {
          const data = res.data;
          this.subInfo = data;
          this.showSubBtn = data;
        }
      });
    },
    cancleSub() {
      this.$confirm("您确定取消订阅吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      }).then(() => {
        this.$get(this.$Url.personal.canalSubEnterprise, {
          id: this.subInfo.id,
        }).then((res) => {
          this.$message({
            type: "success",
            message: "取消订阅成功！",
          });
          this.showSubBtn = false;
        });
      });
    },
    // 初始化
    init() {
      let path = this.$route.path;
      if (path.indexOf("science") > -1) {
        this.barActive = 0;
      } else if (path.indexOf("basic") > -1) {
        this.barActive = 1;
      } else if (path.indexOf("riskmanage") > -1) {
        this.barActive = 2;
      } else if (path.indexOf("news") > -1) {
        this.barActive = 3;
      }

      let promise = new Promise((resolve, reject) => {
        // 获取companyId
        this.$get(this.$Url.company.getCompanyId, {
          keyword: this.companyName,
        }).then((res) => {
          let data = res.data;
          // console.log("data", data);
          if (data) {
            this.companyId = data[0].eid;
            resolve("next");
          }
        });
      });
      promise.then(() => {
        // 计算分值
        this.getScienceScore();
        this.getStabilityScore();
        this.getInvestmentRiskScore();
        this.getOpinionScore();

        this.getCompanyLogo();
        this.isCollect();
        this.getCertificatesList();
        this.getPortrait();
        this.isSub();
      });
    },
    // 权限
    getPermissions() {
      let token = this.$cookie.get("token") || "";
      if (token !== "") {
        let roleId = jwt.decode(token).roleId;
        for (let i in permissionsTable) {
          if (permissionsTable[i].roleId === roleId) {
            this.role = permissionsTable[i].level;
          }
        }
        if (this.role === 2) {
          this.isRole = false;
        } else {
          this.isRole = true;
        }
      }
    },
    // 控制弹窗开关
    addBrand() {
      if (this.isRole) {
        this.dialogCompanyList = true;
        // this.$Sign("m3-2"); // 股权埋点
        this.$nextTick(() => {
          this.$refs.ownershipStructure.ref();
        });
      } else {
        this.$message.error(
          "试用账号无法查看，请联系管理员开通正式账号，联系方式 010-53223695"
        );
      }
    },
    dialogCompanyListFalse() {
      this.dialogCompanyList = false;
    },
    // 综合指数
    getCompositeScore() {
      this.$post(this.$Url.score.compositeScore, {
        name: this.companyName,
        sub_score: {
          科技创新指数: this.scienceScores,
          企业稳定指数: this.stabilityScore,
          市场情绪指数: this.opinionScore,
          投资风险指数: this.riskScore,
        },
      })
        .then((data) => {
          this.compositeScore = data.data || 0;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 获取公司logo
    getCompanyLogo() {
      this.$get(this.$Url.search.companyLogo, {
        eid: this.companyId,
      }).then((res) => {
        let data = res.data;
        if (data) {
          this.companyLogo = data;
        } else {
          this.companyLogo = "none";
        }
      });
    },
    //切换左侧导航
    changeBar(index, routers) {
      if (routers == "qcc") {
        let routerUrl = this.$router.resolve({
          name: "EIQy",
          query: {
            name: this.companyName,
          },
        });
        window.open(routerUrl.href, "_blank");
      } else {
        this.barActive = index;
        this.$router.push({
          name: routers,
        });
      }
    },
    // 获取科技创新指数
    getScienceScore() {
      this.$get(this.$Url.company.basicInfo, {
        companyName: this.companyName,
        dataType: "patentScore",
      })
        .then((data) => {
          this.scienceScores = data.data.patentScore || 0;
          this.$set(this.scoreArr, 0, true);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 获取企业稳定指数
    getStabilityScore() {
      this.$post(this.$Url.score.stabilityScore, {
        eid: this.companyId,
      })
        .then((data) => {
          if (data.data) {
            this.stabilityScore = Math.floor(data.data.score);
            this.$set(this.scoreArr, 1, true);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 获取口碑影响指数
    getOpinionScore() {
      this.$get(this.$Url.score.opinionScore, {
        companyName: this.companyName,
      })
        .then((data) => {
          this.opinionScore = Math.floor(data.data);
          this.$set(this.scoreArr, 2, true);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 获取投资风险指数
    getInvestmentRiskScore() {
      this.$post(this.$Url.score.riskScore, {
        eid: this.companyId,
      })
        .then((data) => {
          if (data.data) {
            // console.log("data.data.score", data.data.score);
            this.riskScore = Math.floor(data.data.score);
            this.riskScore < 50
              ? (this.conclusion = "高")
              : this.riskScore <= 60
              ? (this.conclusion = "中")
              : (this.conclusion = "低");
            this.$set(this.scoreArr, 3, true);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 获取公司标签
    getPortrait() {
      this.$post(this.$Url.science.portrait, {
        eid: this.companyId,
      })
        .then((data) => {
          if (data.data && data.data.length > 0) {
            this.portraitList = data.data.slice(0, 10) || [];
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 上市公司相似
    // getListingList() {
    //   this.$get(this.$Url.science.public, {
    //     companyName: this.companyName,
    //   })
    //     .then((res) => {
    //       let data = res.data;
    //       if (data && Object.keys(data).length > 0) {
    //         let arr = [];
    //         let list = data.list;
    //         for (let i in list) {
    //           if (list[i].name !== this.companyName && Number(i) <= 4) {
    //             arr.push(list[i]);
    //           }
    //         }
    //         if (arr.length > 0) {
    //           this.similarityList = arr;
    //         } else {
    //           this.similarityList = "暂无数据";
    //         }
    //       } else {
    //         this.similarityList = "暂无数据";
    //       }
    //     })
    //     .catch((err) => {
    //       console.log(err);
    //     });
    // },
    // 是否收藏
    isCollect() {
      // this.$get(`${this.$Url.collect.isCollect}/${this.companyId}`).then(
      //   (res) => {
      //     let data = res.data;
      //     if (data && data.length > 0) {
      //       this.isKeep = true;
      //     } else {
      //       this.isKeep = false;
      //     }
      //   }
      // );
      this.$get(this.$Url.collect.isCollection, {
        id: this.companyId,
        sourceType: "COMPANY",
      }).then((res) => {
        this.collectInfo = res.data;
      });
    },
    handleSub() {
      if (this.subInfo.isSubInfo) {
        this.$confirm("您确定取消订阅吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        }).then(() => {
          this.$get(`${this.$Url.personal.canalSubEnterprise}`, {
            id: this.subInfo.id,
          }).then((res) => {
            this.$message({
              type: "success",
              message: "取消订阅成功！",
            });
            this.$set(this.subInfo, "isSubInfo", false);
          });
        });
      } else {
        const param = {
          userId: this.userInfo.id,
          enterpriseId: this.companyId,
          enterpriseName: this.companyName,
        };
        this.$post(this.$Url.personal.enterpriseSub, param).then((res) => {
          this.$message({
            type: "success",
            message: "订阅成功！",
          });
          this.isSub();
          this.$set(this.subInfo, "isSubInfo", true);
        });
      }
    },
    handleCollect() {
      if (this.collectInfo.isCollection) {
        this.$confirm("您确定取消收藏吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        }).then(() => {
          this.$delete(
            `${this.$Url.collect.collectionDelete}/${this.collectInfo.collectionId}`,
            {}
          ).then((res) => {
            this.$message({
              type: "success",
              message: "取消成功！",
            });
            this.$set(this.collectInfo, "isCollection", false);
          });
        });
      } else {
        const param = {
          title: this.companyName,
          sourceId: this.companyId,
          sourceType: "COMPANY",
        };
        param.userId = JSON.parse(localStorage.getItem("homeUserInfo")).id;
        this.$post(this.$Url.collect.collectionAdd, param).then((res) => {
          this.$message({
            type: "success",
            message: "收藏成功！",
          });
          this.$set(this.collectInfo, "isCollection", true);
          this.$set(this.collectInfo, "collectionId", res.data);
        });
      }
    },
    // toggleCollect() {
    //   if (this.isKeep === true) {
    //     this.$get(`${this.$Url.collect.deleteCollect}/${this.companyId}`).then(
    //       (res) => {
    //         this.isKeep = false;
    //         this.$message.success("取消收藏成功");
    //       }
    //     );
    //   } else {
    //     // this.$Sign("m2-7"); // 收藏埋点
    //     this.$post(this.$Url.collect.add, {
    //       companyid: this.companyId,
    //       isClick: 0,
    //       companyInfo: this.companyName,
    //     }).then((res) => {
    //       this.isKeep = true;
    //       this.$message.success("收藏成功");
    //     });
    //   }
    // },
    toggleBaseInfo() {
      this.toggleBasic = !this.toggleBasic;
      this.computedScrollOffsetWidth();
      // resize图表
      this.$Bus.$emit("chartResize", {
        path: this.$route.path,
        active: this.$route.query.active || 0,
      });
    },
    // 计算toggle按钮位置
    computedScrollOffsetWidth() {
      let toggleBtn = document.getElementById("toggle-btn");
      let aside = document.getElementById("aside");
      if (this.toggleBasic) {
        let basicDiv = document.getElementById("basic");
        // 28px是自身的宽度
        toggleBtn.style.left =
          basicDiv.offsetWidth + aside.offsetWidth - 28 + "px";
      } else {
        toggleBtn.style.left = aside.offsetWidth + "px";
      }
    },
    // 跳转到技术对比
    goTechComparison(companyName) {
      this.$router.push({
        name: "technicalComparison",
        query: {
          compareName: companyName,
        },
      });
    },
    // 跳转到指数相应页面
    toPath(key) {
      if (key === 0) {
        this.barActive = 0;
        this.$router.push({
          name: "technologyOverview",
        });
      } else if (key === 1) {
        this.barActive = 1;
        this.$Bus.$emit("toAnalysisBox", true);
        this.$router.push({
          name: "basic",
          query: {
            active: 1,
          },
        });
      } else if (key === 2) {
        this.barActive = 2;
        this.$router.push({
          name: "riskmanage",
          query: {
            active: 1,
          },
        });
      } else if (key === 3) {
        this.barActive = 3;
        this.$router.push({
          name: "news",
        });
      }
    },
    // 企业资质
    getCertificatesList() {
      this.$post(this.$Url.score.certificatesList, {
        name: this.companyName,
        id: this.companyId,
      })
        .then((data) => {
          if (data.data && data.data.length > 0) {
            let arr = JSON.parse(JSON.stringify(data.data));
            let kinds = [];
            let list = [];
            for (let i = 0; i < arr.length; i++) {
              if (arr[i].kind) {
                kinds.push(arr[i].kind);
              }
            }
            kinds = Array.from(new Set(kinds));
            for (let i = 0; i < kinds.length; i++) {
              let typeList = [];
              for (let j = 0; j < arr.length; j++) {
                if (arr[j].kind === kinds[i]) {
                  typeList.push({
                    time: arr[j].time,
                    type: arr[j].type,
                  });
                }
              }
              list.push({
                kind: kinds[i],
                types: typeList,
              });
            }
            let listStr = "";
            for (let i = 0; i < list.length; i++) {
              let listI = list[i];
              let className = "";
              if (listI.kind.indexOf("高新技术企业认证") > -1) {
                className = "gxjsqyrz";
              } else if (listI.kind.indexOf("CCC产品认证") > -1) {
                className = "ccccprz";
              } else if (listI.kind.indexOf("质量管理体系") > -1) {
                className = "iso9001";
              } else if (listI.kind.indexOf("建筑工程") > -1) {
                className = "jzgc";
              } else if (listI.kind.indexOf("食品") > -1) {
                className = "shipin";
              } else if (listI.kind.indexOf("药品") > -1) {
                className = "yaopin";
              } else if (listI.kind.indexOf("环境管理体系认证") > -1) {
                className = "hjgltxrz";
              } else if (listI.kind.indexOf("健康安全") > -1) {
                className = "jkaq";
              } else if (listI.kind.indexOf("GSP认证证书") > -1) {
                className = "gsprzzs";
              } else if (listI.kind.indexOf("医疗器械") > -1) {
                className = "ylqx";
              } else if (listI.kind.indexOf("绿色食品") > -1) {
                className = "lssp";
              } else if (listI.kind.indexOf("中国食品农产品认证") > -1) {
                className = "zgspncprz";
              } else if (listI.kind.indexOf("计算机信息系统集成") > -1) {
                className = "jsjxxxtjc";
              } else if (listI.kind.indexOf("GMP认证证书") > -1) {
                className = "gmprzzs";
              } else if (listI.kind.indexOf("采矿权") > -1) {
                className = "ckq";
              } else if (listI.kind.indexOf("知识产权") > -1) {
                className = "zscq";
              } else if (listI.kind.indexOf("国产化妆品批准文号") > -1) {
                className = "gchzppzwh";
              } else if (listI.kind.indexOf("信息安全") > -1) {
                className = "xxaq";
              } else if (listI.kind.indexOf("质量管理体系-其他") > -1) {
                className = "zlgltxqt";
              } else if (listI.kind.indexOf("生产许可证") > -1) {
                className = "scxkz";
              } else if (listI.kind.indexOf("工业产品生产许可证") > -1) {
                className = "gycpscxkz";
              } else if (listI.kind.indexOf("环境标志产品") > -1) {
                className = "hjbzcp";
              } else if (listI.kind.indexOf("森林认证") > -1) {
                className = "slrz";
              } else if (listI.kind.indexOf("化妆品生产许可证") > -1) {
                className = "hzpscxkz";
              } else if (listI.kind.indexOf("环境") > -1) {
                className = "hj";
              } else if (listI.kind.indexOf("新能源") > -1) {
                className = "xny";
              } else if (listI.kind.indexOf("招标代理") > -1) {
                className = "zbdl";
              } else if (listI.kind.indexOf("企业社会责任管理体系认证") > -1) {
                className = "qyshzrgltxrz";
              } else if (listI.kind.indexOf("乳制品") > -1) {
                className = "rzp";
              } else if (listI.kind.indexOf("房产开发资质") > -1) {
                className = "fckfzz";
              } else if (listI.kind.indexOf("党组织建设质量管理体系") > -1) {
                className = "dzzjszlgltx";
              } else if (listI.kind.indexOf("软件CMM") > -1) {
                className = "rjcmm";
              } else {
                className = "qt";
              }

              let tip = "";
              for (let j = 0; j < listI.types.length; j++) {
                tip += `${listI.types[j].type}&nbsp;${listI.types[j].time}\n`;
              }
              listStr += `<li><div title="${tip}" class="default ${className}"></div></li>`;
            }
            this.certificatesList = listStr;
          } else {
            this.certificatesList = "暂无数据";
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  watch: {
    "$i18n.locale"() {
      this.country = this.$cookie.get("companyCountry");
      // 国外公司只展示科技信息
      if (this.country !== "1") {
        this.bar = [
          {
            id: 1,
            name: this.$t("assessment.ScienceInfo"),
            routers: "science",
          },
        ];
      } else {
        this.bar = [
          {
            id: 1,
            name: this.$t("assessment.ScienceInfo"),
            routers: "science",
          },
          { id: 2, name: this.$t("assessment.BasicInfo"), routers: "basic" },
          {
            id: 3,
            name: this.$t("assessment.RiskControlInfo"),
            routers: "riskmanage",
          },
          { id: 4, name: this.$t("assessment.NewsInfo"), routers: "news" },
        ];
      }
    },
    scoreArr() {
      for (let i = 0; i < this.scoreArr.length; i++) {
        if (this.scoreArr[i] === false) {
          return;
        }
      }
      this.getCompositeScore();
    },
  },
  beforeMount() {
    // 公司国别 0：国外 1：国内 -1：未知
    this.country = this.$cookie.get("companyCountry");
    // 国外公司只展示科技信息
    if (this.country !== "1") {
      this.bar = [
        { id: 1, name: this.$t("assessment.ScienceInfo"), routers: "science" },
      ];
    }
  },
  mounted() {
    this.init();
    // this.getListingList();
    this.getPermissions(); // 权限
    //
    this.computedScrollOffsetWidth();
    window.onresize = () => {
      this.computedScrollOffsetWidth();
    };
  },
  beforeDestroy() {
    this.$Bus.$off("toAnalysisBox");
  },
};
</script>
<style lang="scss">
.el-message-box{
  .el-button--primary {
    color: #FFF;
    background-color: $mainColor !important;
    border-color: $mainColor !important;
}
.el-button--primary:active,.el-button--primary:focus,.el-button--primary:hover{
  color: #FFF !important;
    background-color: $mainColor !important;
    border-color: $mainColor !important;
}
.el-button:focus, .el-button:hover {
    color: $mainColor;
    border-color: $mainColor;
    background-color: $hoverColor;
}
}
</style>
<style lang="scss">
@import "./index.scss";
</style>
<style lang="scss" scoped>
.aside {
  position: fixed;
  top: 0;
  height: calc(100% - 0.7rem);
  background-color: #211F26;
  .aside-list {
    position: relative;
    padding: 0;
    list-style: none;
    li {
      display: block;
      box-sizing: border-box;
      text-align: center;
      cursor: pointer;
      &:hover {
        color: #fff;
        background-color: #84828E;
      }
      &.aside-list-active {
        background-color: #84828E;
        p {
          color: #fff !important;
        }
      }
      i {
        display: inline-block;
        width: 100%;
        height: 20px;
        color: #b5b5c9;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: auto 100%;
      }
      p {
        margin-bottom: 0;
        font-weight: 600;
        text-decoration: none;
        font-size: 12px;
        color: #b5b5c9;
      }
    }
  }
}
.icon-info1 {
  background-image: url(../img/menu01.png);
}
.icon-info1.active {
  background-image: url(../img/menu01-active.png) !important;
}
.icon-info2 {
  background-image: url(../img/menu02.png);
}
.icon-info2.active {
  background-image: url(../img/menu02-active.png) !important;
}
.icon-info3 {
  background-image: url(../img/menu03.png);
}
.icon-info3.active {
  background-image: url(../img/menu03-active.png) !important;
}
.icon-info4 {
  background-image: url(../img/menu04.png);
}
.icon-info4.active {
  background-image: url(../img/menu04-active.png) !important;
}
.icon-info5 {
  background-image: url(../img/menu05.png);
}

// .container {
//   padding: 0 24px;
// }

.basic-info {
  position: fixed;
  text-align: center;
  overflow-y: auto;
  background-color: #3d3c42;
}
.basic-info-hide {
  left: -440px !important;
}
#gauge {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 200px;
  height: 180px;
  margin-left: -100px;
}
.circle {
  position: absolute;
  top: 10px;
  left: 50%;
  width: 154px;
  margin-left: -77px;
}
.logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 134px;
  height: 134px;
  margin-top: 30px;
  margin-bottom: 10px;
  border: 6px solid rgba(39, 39, 68, 0.7);
  border-radius: 50%;
  background-color: #fff;
  text-align: center;
  overflow: hidden;
}
.logo img {
  display: block;
  max-width: 80%;
  max-height: 80%;
}
.basic-info h3 {
  position: relative;
  float: left;
  width: 100%;
  margin-top: 10px;
  margin-bottom: 14px;
  text-align: center;
  font-weight: bold;
  font-size: 15px;
  color: #fff;
}
.basic-info > p {
  float: left;
  position: relative;
  width: 100%;
  margin-bottom: 5px;
  text-align: left;
  font-weight: 600;
  font-size: 14px;
  color: #fff;
}
.collect {
  display: inline-block;
  width: 26px;
  height: 26px;
  background: url(../img/collect.png) no-repeat center center;
  background-size: 100% auto;
  cursor: pointer;
  vertical-align: text-bottom;
  margin-top: 8px;
}
.not-collect {
  background-image: url(../img/not-collect.png) !important;
}

.subInfo {
  display: inline-block;
  width: 26px;
  height: 26px;
  background: url(../img/dingyue.png) no-repeat center center;
  background-size: 100% auto;
  cursor: pointer;
  vertical-align: text-bottom;
  margin-top: 8px;
}
.not-subInfo {
  background-image: url(../img/dingyue1.png) !important;
}
.list1,
.list2,
.list4 {
  position: relative;
  float: left;
  width: 100%;
  list-style: none;
  padding: 0;
  /* margin-top: 10px; */
  margin-bottom: 10px;
  text-align: left;
}
.list1 li {
  width: 100%;
  line-height: 36px;
  font-size: 14px;
  color: #fff;
}
.list1 li i {
  display: inline-block;
  font-style: normal;
  vertical-align: middle;
  cursor: pointer;
}
.list1 li i:hover {
  // color: #fff;
}
.conclusion2.middle {
  color: #fddf76 !important;
}
.conclusion2.high {
  color: #fc3f4d !important;
}
.score-star {
  position: relative;
  display: inline-block;
  margin-bottom: 0;
  vertical-align: middle;
}
.score-star span {
  display: block;
  float: left;
  width: 14px;
  height: 14px;
  margin-left: 3px;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.2);
}
.score-star .color1 {
  background-color: #22dabe !important;
}
.score-star .color2 {
  background-color: #fddf76 !important;
}
.score-star .color3 {
  background-color: #fc3f4d !important;
}
.list2 li {
  float: left;
  line-height: 24px;
  padding: 0 13px;
  margin-bottom: 10px;
  margin-right: 10px;
  border-radius: 15px;
  font-size: 12px;
  background-color: #3d3d57;
  color: $mainColor;
  cursor: default;
}
.list2 li:hover {
  color: #fff;
  background-color: $mainColor;
}
.list3-tit {
  float: left;
  position: relative;
  margin-bottom: 4px;
  text-align: left;
  font-weight: 600;
  font-size: 16px;
  color: #fff;
}
.list4 {
  margin-bottom: 80px;
}
.list4 h5 {
  line-height: 24px;
  margin-bottom: 10px;
  text-align: left;
  font-weight: 600;
  font-size: 16px;
  color: #cac9ed;
}
.list4 li {
  position: relative;
}
.list4 li p {
  padding-left: 0;
  padding-right: 100px;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 24px;
  font-size: 14px;
  color: #a7a5d4;
}
.list4 .vbtn {
  position: absolute;
  top: 50%;
  right: -10px;
  width: 67px;
  height: 30px;
  margin-top: -15px;
  font-size: 12px;
  color: #8a88df;
  background-color: #3d3d57 !important;
}
.list4 .vbtn:hover {
  color: $mainColor;
  background-color: #fff !important;
}
.toggle-btn {
  position: fixed;
  top: 50%;
  left: 411px;
  z-index: 2;
  width: 28px;
  height: 44px;
  margin-top: -22px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  text-align: center;
  font-size: 18px;
  color: $mainColor;
  background-color: #fff;
  cursor: pointer;
}
.toggle-btn:hover {
  background-color: #eee;
}
.toggle-btn-hide {
  width: 24px;
  border: 1px dotted #ccc;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.toggle-btn-icon {
  width: 20px;
  line-height: 44px;
}
.red-color {
  color: #c44b5c !important;
}
.btn {
  background: url("../img/guquan.png") center no-repeat;
}
.iconwenhao {
  display: inline-block;
  width: 25px;
  height: 25px;
  cursor: pointer;
  font-size: 28px;
  font-weight: bold;
  vertical-align: text-bottom;
  margin-left: 10px;
  color: #b5b4d6;
  background: url("../img/wenhao.png") center no-repeat;
  background-size: 100% auto;
}
.close {
  font-size: 26px;
  position: absolute;
  right: 50px;
  top: 20px;
  outline: none;
  border-color: transparent;
  box-shadow: none;
}
.sub_btn {
  .el-button {
    width: 80px;
  }
}
</style>
